<template>
	<z-paging-swiper ref="paging" class="z-paging" :swiper-style="{ top: '0px' }">
		<template v-slot:top>
			<z-tabs ref="tabsRef" :current="current" :list="tabList" @change="tabsChange"></z-tabs>
		</template>

		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper :disable-touch="true" class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<itemVue :item="item" :tabIndex="index" :currentIndex="current" />
			</swiper-item>
		</swiper>

		<template v-slot:bottom>底部导航条</template>
	</z-paging-swiper>
</template>

<script setup>
import http from '@/common/request.js';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import itemVue from './item.vue';

const current = ref(0);
const tabsRef = ref();
const tabList = reactive([
	{
		name: 'tab1',
		value: 'tab1'
	},
	{
		name: 'tab2',
		value: 'tab2'
	},
	{
		name: 'tab3',
		value: 'tab3'
	},
	{
		name: 'tab4',
		value: 'tab4'
	},
	{
		name: 'tab5',
		value: 'tab5'
	},
	{
		name: 'tab6',
		value: 'tab6'
	}
]);

const tabsChange = (index) => {
	current.value = index;
};

// swiper滑动中
const swiperTransition = (e) => {
	tabsRef.value.setDx(e.detail.dx);
};
// swiper滑动结束
const swiperAnimationfinish = (e) => {
	current.value = e.detail.current;
	tabsRef.value.unlockDx();
};
</script>

<style lang="scss" scoped>
.swiper {
	height: 100%;
}
</style>
